<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES Module - 模块的特性</title>
  </head>
  <body>
    <!-- 通过给script标签添加 type = module的属性 就可以以ESModule 的标准执行其中的代码了 -->
    <script type="module">
      console.log("es module");
    </script>
    <!-- 1. ESM自动采用严格模式 忽略 'use strict'  -->
    <script type="module">
      // 不能咋全局范围内直接指向this
      // 非严格模式this指向全局对象window
      // 严格模式下是undefined
      console.log(this);
    </script>
    <!-- 2. 每个 ES Module 都是运行在单独的私有作用域中 -->
    <!-- script[type=module] -->
    <script type="module">
      var foo = 100;
      console.log(foo);
    </script>
    <!-- 第二个标签中打印会报错 每个ESM哟一个独立的私有作用域!  -->
    <!-- <script type="module">
      console.log(foo);
    </script> -->
    <!-- 3. ESM是通过CORS的方式请求的JS外部模块 -->
    <!-- 服务端必须支持CORS 否则被浏览器中止掉-->
    <!-- http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js -->
    <!-- No 'Access-Control-Allow-Origin' header is present on the requested resource. -->
    <!-- https://unpkg.com/browse/jquery@3.1.1/dist/jquery.min.js -->
    <!-- <script
      type="module"
      src="https://unpkg.com/browse/jquery@3.4.1/dist/jquery.min.js"
    ></script> -->
    <!-- Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. -->
    <!-- CORS不支持文件的方式访问 必须使用http server的形式让CORS工作 -->
    <!-- 4. ESM的Script标签会延迟执行脚本 -->
    <!-- 等同于script标签的defer属性 -->
    <!-- 默认script是立即执行的机制 页面的渲染会等待脚本的执行完成  -->
    <!-- 正常执行 -->
    <!-- <script src="demo.js"></script>
    <p>正常内容</p> -->
    <!-- 先弹出 然后网页才刷新 -->
    <!-- ESM执行 -->
    <!-- 异步执行 -->
    <!-- <script type="module" src="demo.js"></script>
    <p>ESM内容</p> -->
    <!-- IE方法： -->
    <script type="text/javascript" src="demo.js" defer></script>
    <p>defer内容</p>
    <!-- 异步加载 只能ie能用，不能在标签里写代码 -->
    <!-- defer chrome 在server不能用 web server下只能ESM -->
    <!-- w3c方法： -->
    <!-- <script type="text/javascript" src="demo.js" aysnc></script>
    <p>async内容</p> -->
    <!-- w3c标准方法，能在标签里写代码 -->
    <!-- 不是延迟加载, 会阻塞后面的代码 -->
  </body>
</html>
